<template>
  <div>
    <div class="head" :style="{height: headHeight}">
    <div class="title">
      <img :src="head" class="to" :style="{width: toWidth,height: toHeight,borderRadius: toBorderRadius,shapeOutSide: toShapeOutside}"></img>
    </div>
    </div>
    <div class="lecturers-head" :style="{height: lecturersHead,paddingTop: nickNamePaddingTop}">
      <div class="nickName" :style="{fontSize: nickNameFontSize}">
        <span>{{lecturersScope.nickName}}</span>
        <div class="level" :style="{width: levelWidth, height: levelHeight,borderRadius: levelBorderRadius,fontSize: levelFontSize,marginLeft: levelMarginLeft}" v-on:click="openLecturerLevel()">T{{lecturersScope.level}}</div>
      </div>
      <div :style="{marginLeft: HRmarginLeft,height: newsPaddingDivHeight,marginTop: newsPaddingDivPaddingTop}">
        <div class="newsPadding" :style="{width:monthlyPaddingWidth}">
          <div class="lecturer-news-onder" :style="{width:monthlyPaddingWidth,fontSize: lecturerNewsOnderFontSize}">{{lecturersScope.courseHour}}</div>
          <div class="lecturer-news-down" :style="{fontSize: lecturerNewsDownFontSize}">开课时间(h)</div>
        </div>
        <div class="newsPadding" :style="{width:monthlyPaddingWidth}">
          <div class="lecturer-news-onder" :style="{fontSize: lecturerNewsOnderFontSize}">{{lecturersScope.courseNum}}</div>
          <div class="lecturer-news-down" :style="{fontSize: lecturerNewsDownFontSize}">开课次数(节)</div>
        </div>
        <div class="newsPadding" :style="{width:monthlyPaddingWidth}">
          <div class="lecturer-news-onder" :style="{fontSize: lecturerNewsOnderFontSize}">{{lecturersScope.score}}</div>
          <div class="lecturer-news-down" :style="{fontSize: lecturerNewsDownFontSize}">讲师积分(分)</div>
        </div>
      </div>
      <div v-show="lecturersScope.isLecturer === 1" class="icon">
        <div style="margin-top:30px" v-on:click="openMonthly()" class="icon-menu"></div>
      </div>
    </div>
    <div v-show="lecturerMonthlyIsOpen === true" v-for="lecturerMonthly in lecturerMonthlyList" v-bind:key="lecturerMonthly-1">
      <div :style="{marginTop: monthlyDateMarginTop,marginBottom: monthlyDateMarginBottom,fontSize: monthlyDateMarginFontSize}">{{lecturerMonthly.beginDate}}</div>
      <div class="monthly-parent-div" :style="{height: monthlyParentDivHeight}">
        <div :style="{marginLeft:imgPaddingLeft}">
          <div class="monthlyPadding" :style="{width: monthlyPaddingWidth,marginTop: monthlyMarginTop}">
            <div class="lecturer-monthly-onder" :style="{width: monthlyPaddingWidth, fontSize: lecturerMonthlyOnderFontSize,marginBottom: lecturerMonthlyOnderPaddingBottom}">{{lecturerMonthly.courseHour}}</div>
            <div class="lecturer-monthly-down" :style="{width: monthlyPaddingWidth,fontSize: lecturerMonthlyDownFontSize}">开课时间(h)</div>
          </div>
          <div class="monthlyPadding" :style="{width: monthlyPaddingWidth,marginTop: monthlyMarginTop}">
            <div class="lecturer-monthly-onder" :style="{width: monthlyPaddingWidth, fontSize: lecturerMonthlyOnderFontSize,marginBottom: lecturerMonthlyOnderPaddingBottom}">{{lecturerMonthly.courseNum}}</div>
            <div class="lecturer-monthly-down" :style="{width: monthlyPaddingWidth,fontSize: lecturerMonthlyDownFontSize}">开课次数(节)</div>
          </div>
          <div class="monthlyPadding" :style="{width: monthlyPaddingWidth,marginTop: monthlyMarginTop}">
            <div class="lecturer-monthly-onder" :style="{width: monthlyPaddingWidth, fontSize: lecturerMonthlyOnderFontSize,marginBottom: lecturerMonthlyOnderPaddingBottom}">{{lecturerMonthly.newCourseWareNum}}</div>
            <div class="lecturer-monthly-down" :style="{width: monthlyPaddingWidth,fontSize: lecturerMonthlyDownFontSize}">新增课程(门)</div>
          </div>
          <div class="monthlyPadding" :style="{width: monthlyPaddingWidth,marginTop: monthlyMarginTop}">
            <div class="lecturer-monthly-onder" :style="{width: monthlyPaddingWidth, fontSize: lecturerMonthlyOnderFontSize,marginBottom: lecturerMonthlyOnderPaddingBottom}">{{lecturerMonthly.optimizeNum}}</div>
            <div class="lecturer-monthly-down" :style="{width: monthlyPaddingWidth,fontSize: lecturerMonthlyDownFontSize}">课程优化(门)</div>
          </div>
          <div class="monthlyPadding" :style="{width: monthlyPaddingWidth,marginTop: monthlyMarginTop}">
            <div class="lecturer-monthly-onder" :style="{width: monthlyPaddingWidth, fontSize: lecturerMonthlyOnderFontSize,marginBottom: lecturerMonthlyOnderPaddingBottom}">{{lecturerMonthly.adviceNum}}</div>
            <div class="lecturer-monthly-down" :style="{width: monthlyPaddingWidth,fontSize: lecturerMonthlyDownFontSize}">培训建议(条)</div>
          </div>
          <div class="monthlyPadding" :style="{width: monthlyPaddingWidth,marginTop: monthlyMarginTop}">
            <div class="lecturer-monthly-onder" :style="{width: monthlyPaddingWidth, fontSize: lecturerMonthlyOnderFontSize,marginBottom: lecturerMonthlyOnderPaddingBottom}">{{lecturerMonthly.newLecturerNum}}</div>
            <div class="lecturer-monthly-down" :style="{width: monthlyPaddingWidth,fontSize: lecturerMonthlyDownFontSize}">培育讲师(名)</div>
          </div>
        </div>
      </div>
    </div>

    <div v-show="lecturersScope.isLecturer === 1">
      <div class="lecturers-title lecturer-news-down" :style="{height: lecturersTitleHeight,lineHeight: lecturersTitleLineHeight}">我的课件</div> 
      <div class="background" v-infinite-scroll="getList"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10" :style="{maxHeight: backgroundMaxHeight}">
        <div class="n-lecturers-height" :style="{height: lecturersHeight}" v-for="courseWare in courseWareList" v-bind:key="courseWare-1" v-on:click="openMoreCourse(courseWare.id)">
          <div class="lecturers" :style="{height: lecturersHeight,lineHeight: lecturersLineHeight}">
              <img class="img" :style="{width: imgWidth,marginLeft: imgPaddingLeft,marginTop: imgPaddingTop, height: imgHeight}" :src="courseWare.imgUrl">
          </div>
          <div class="n-lecturers-detail" :style="{marginTop: nLecturersDetailPaddingTop,marginLeft: nLecturersDetailPaddingLeft}">
            <div class="n-lecturers-title" :style="{fontSize:  nLecturersNumberPaddingTop}">{{courseWare.name}}</div>
            <div class="n-lecturers-time" :style="{fontSize: nLecturersDetailPaddingLeft}">课时:{{courseWare.classHour}}</div>
            <div class="n-lecturers-lastTime" :style="{fontSize: nLecturersDetailPaddingLeft}">上次开课：{{courseWare.lastUseTime | formatDate}}</div>
          </div>
          <div class="n-lecturers-number" :style="{width: nLecturersNumberWidth,height: nLecturersNumberHeight,marginTop: nLecturersNumberPaddingTop,marginRight: nLecturersNumberPaddingRight}">
            <div class="n-lecturers-isOpen" :style="{fontSize: nLecturersIsOpen}">已开课(节)</div>
            <div class="n-lecturers-num" :style="{fontSize: nLecturersNum}">{{courseWare.num}}</div>
          </div>
        </div>
      </div>
      <div class="lecturers-title lecturer-news-down" :style="{height: lecturersTitleHeight,lineHeight: lecturersTitleLineHeight}">
        我的建议
        <div class="n-button-float-right" :style="{marginRight: levelHeight}"><mt-button class="n-lecturers-button" :style="{width: nLecturersButtonWidth,height: nLecturersButtonHeight,fontSize: nLecturersButtonFontSize}" type="default" v-on:click="openAdvice">提建议</mt-button></div>        
      </div>
      <div class="advice-div" :style="{maxHeight: adviceDivMaxHeight}" v-infinite-scroll="getLecturerAdviceList"
          infinite-scroll-disabled="adviceLoading"
          infinite-scroll-distance="10">     
        <div style="height:56px" v-for="lecturerAdvice in lecturerAdviceList" v-bind:key="lecturerAdvice-1">
          <div class="n-lecturers-advice" :style="{lineHeight: nLecturersAdviceLineHeight,marginTop: lecturerMonthlyDownFontSize,marginLeft: levelHeight,marginRight: levelHeight,fontSize: nLecturersAdviceFontSize}">{{lecturerAdvice.content}}</div>
          <div class="n-lecturers-advice-time" :style="{fontSize: nLecturersDetailPaddingLeft,marginLeft: levelHeight,marginTop: lecturerMonthlyDownFontSize}">{{lecturerAdvice.created | formatDateDHSS}}</div>
          <hr>
        </div>
      </div>
    </div>

    <div v-show="isShow==1" :style="{marginLeft: trialLectureDivMarginLeft,marginTop: trialLectureDivMarginTop,marginBottom: initCourseMarginBottom,height:height600px}">
      <div class="order" :style="{height: orderHeight,lineHeight: orderLineHeight}">
        <div>
          <div class="round yellow" :style="{width: roundWidth, height: roundHeight,marginLeft: roundLeft}"></div>
          <div class="dashed" :style="{height: dashedHeight, marginTop: roundTop}"></div>
        </div>
        <div :style="{marginLeft: orderDivMarginLeft}">
          <div class="order-text" :style="{fontSize: orderLineHeight}">讲师预约</div>
          <div class="order-div" :style="{marginTop: orderDivPaddingTop}">
            <div class="order-message" :style="{width: orderMessageWidth}">请与培训部约定试讲时间与会议室,以便给您的讲师资质定级</div>
            <div style="float:right" :style="{marginRight: orderButtonPaddingRight}">
                <mt-button v-if="trialLectureIsInProcess.lecturerStatus==1" class="order-button order-button-true-color" type="default" v-on:click="appointment()" :style="{width: orderButtonWidth,height: orderButtonHeight,fontSize: orderButtonFontSize,borderRadius: orderButtonBorderRadius}">预约</mt-button>
                <mt-button v-if="trialLectureIsInProcess.lecturerStatus==2 || trialLectureIsInProcess.lecturerStatus==3" disabled class="order-button order-button-flase-color" type="default" v-on:click="submit" :style="{width: orderButtonWidth,height: orderButtonHeight,fontSize: orderButtonFontSize,borderRadius: orderButtonBorderRadius}">已预约</mt-button>
            </div>
          </div>        
        </div>
      </div>
      <div class="order" :style="{marginTop: orderMarginTop,height: orderHeight,lineHeight: orderLineHeight}">
        <div>
          <div class="round DarkOrange" :style="{width: roundWidth, height: roundHeight,marginLeft: roundLeft}"></div>
          <div class="dashed" :style="{height: dashedHeight, marginTop: roundTop}"></div>
        </div>
        <div :style="{marginLeft: orderDivMarginLeft}">
          <div class="order-text" :style="{fontSize: orderLineHeight}">试讲通知</div>
          <div class="order-div" :style="{marginTop: orderDivPaddingTop}">
            <div v-if = "trialLectureIsInProcess.lecturerStatus==1 || trialLectureIsInProcess.lecturerStatus==2" class="order-message" :style="{width: orderMessageWidth}">培训部同意试讲后,将按预约时间参加试讲.</div>
            <div v-if="trialLectureIsInProcess.lecturerStatus==3" class="order-message" :style="{width: orderMessageWidth}">试讲申请已通过,请在<span class="span-addressAndTime">{{trialLectureIsInProcess.tryTime | formatDate}} {{trialLectureIsInProcess.address}}</span>进行讲师试讲认证</div>
            <div style="float:right" :style="{marginRight: orderButtonPaddingRight}">
                <mt-button  v-if="trialLectureIsInProcess.lecturerStatus==2" class="order-button order-button-approval-color" type="default" v-on:click="submit" :style="{width: orderButtonWidth,height: orderButtonHeight,fontSize: orderButtonFontSize,borderRadius: orderButtonBorderRadius}">审批中</mt-button>
                <mt-button  v-if="trialLectureIsInProcess.lecturerStatus==3" disabled class="order-button order-button-approvalPass-color" type="default" v-on:click="submit" :style="{width: orderButtonWidth,height: orderButtonHeight,fontSize: orderButtonFontSize,borderRadius: orderButtonBorderRadius}">审批通过</mt-button>
            </div>
          </div>        
        </div>
      </div>
      <div :style="{marginTop: orderMarginTop,height: orderHeight,lineHeight: orderLineHeight}">
        <div>
          <div class="round red" :style="{width: roundWidth, height: roundHeight,marginLeft: roundLeft}"></div>
        </div>
        <div :style="{marginLeft: orderDivMarginLeft}">
          <div class="order-text" :style="{fontSize: orderLineHeight}">讲师定级</div>
          <div class="order-div" :style="{marginTop: orderDivPaddingTop}">
            <div class="order-message" :style="{width: orderMessageWidth,fontSize: orderMessageFontSize, letterSpacing: orderMessageLetterSpacing,lineHeight: orderMessageLineHeight}">在你完成试讲评定后,培训部将根据您的表现定级</div>
          </div>        
        </div>
      </div>
    </div>

    <div v-show="lecturersScope.isLecturer === 0">
      <div v-show="isShow==0" class="becomeLecturers">
        <div class="becomeLecturers-div icon" :style="{fontSize: becomeLecturersDiv,marginTop: becomeLecturersDivMarginTop}">
        <p>您当前尚未开设课程,</p>
        <p> 您可以向培训部提交申请</p>
        <p>成为网营讲师.</p>
        </div>
        <div :style="{marginBottom: initCourseMarginBottom}" class="becomeLecturers-button-div">
          <mt-button class="becomeLecturer-button order-button-true-color icon" type="default"  v-on:click="openLecturerDialog()" :style="{width: becomeLecturerButtonWidth,height: becomeLecturerButtonHeight,fontSize: becomeLecturerFontSize,borderRadius: becomeLecturerBorderRadius,marginTop: becomeLecturerMarginTop}">成为讲师</mt-button>
        </div>
      </div>
    </div>

    <div v-show="isShow==2" class="appointment" :style="{marginTop: monthlyDateMarginBottom}">
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentColumnHeight,lineHeight: appointmentColumnLineHeight}">
        <div class="appointment-title-font" :style="{fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">花名</div>
        <div class="appointment-message-font" :style="{fontSize: appointmentTitleFontFontSize}">{{loginUser.username}}</div>
      </div>
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentColumnHeight,lineHeight: appointmentColumnLineHeight}">
        <div class="appointment-title-font" :style="{fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">部门</div>
        <div class="appointment-message-font" :style="{fontSize: appointmentTitleFontFontSize}">{{loginUser.department.name}}</div>
      </div>
      <!-- <div class="appointment-column" :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft}">
        <div class="appointment-title-font">岗位</div>
        <div class="appointment-message-font"></div>
      </div> -->
      <hr :style="{marginLeft: HRmarginLeft,marginRight: HRmarginRight}">
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentColumnHeight2}">
        <div class="appointment-title-font" :style="{fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">讲师简介</div>
        <div class="appointment-message-font" :style="{fontSize: appointmentTitleFontFontSize}">
          <textarea placeholder="请输入讲师简介" rows="4" v-model="memo"></textarea>
        </div>
      </div>
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentColumnHeight,lineHeight: appointmentColumnLineHeight}">
        <div class="appointment-title-font" :style="{fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">试讲时间</div>
        <div class="appointment-message-font" :style="{fontSize: appointmentTitleFontFontSize}" @click="openPicker" style="color: #BEBFD7;">
          {{tryTime}}
        </div>
      </div>
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentColumnHeight,lineHeight: appointmentColumnLineHeight}">
        <div class="appointment-title-font" :style="{fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">试讲内容</div>
        <div class="appointment-message-font" :style="{fontSize: appointmentTitleFontFontSize}">
          <input placeholder="请输入课件名称" v-model="courseWareName"></input>
        </div>
      </div>
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentMeetingRoomColumnHeight}">
        <div class="appointment-title-font" :style="{marginTop: HRmarginRight,fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">地址</div>
        <div class="appointment-checkbox-class" :style="{marginTop: HRmarginRight,width: appointmentCheckboxClassWidth}">
          <div class="appointment-checkbox" :style="{width: appointmentCheckboxWidth,height: appointmentCheckboxHeight,fontSize: appointmentCheckboxFontSize,lineHeight: appointmentCheckboxLineHeight,marginBottom: marginBottom30px}" v-on:click="checkMeetingRoom('小红会议室',$event)" >小红会议室</div>
          <div class="appointment-checkbox" :style="{marginLeft: HRmarginRight,width: appointmentCheckboxWidth,height: appointmentCheckboxHeight,fontSize: appointmentCheckboxFontSize,lineHeight: appointmentCheckboxLineHeight,marginBottom: marginBottom30px}" v-on:click="checkMeetingRoom('小绿会议室',$event)" >小绿会议室</div>
          <div class="appointment-checkbox" :style="{width: appointmentCheckboxWidth,height: appointmentCheckboxHeight,fontSize: appointmentCheckboxFontSize,lineHeight: appointmentCheckboxLineHeight,marginBottom: marginBottom30px}" v-on:click="checkMeetingRoom('VIP会议室',$event)" >VIP会议室</div>
          <div class="appointment-checkbox" :style="{marginLeft: HRmarginRight,width: appointmentCheckboxWidth,height: appointmentCheckboxHeight,fontSize: appointmentCheckboxFontSize,lineHeight: appointmentCheckboxLineHeight,marginBottom: marginBottom30px}" v-on:click="checkMeetingRoom('大培训教室',$event)" >大培训教室</div>
        </div>
      </div>
      <div :style="{marginLeft:HRmarginLeft,marginRight: HRmarginLeft,height: appointmentColumnHeight,lineHeight: appointmentColumnLineHeight}">
        <div class="appointment-title-font" :style="{fontSize: appointmentTitleFontFontSize,width: appointmentTitleFontWidth}">推介人</div>
        <div v-on:click="openGetSlotValue()" class="appointment-message-font" :style="{fontSize: appointmentTitleFontFontSize}">
          {{referrerNickName}}
          <div style="font-size:30px;"></div>
        </div>
      </div>
    </div>
    <div v-show="isShow==2" class="n-appointment-button-div" :style="{marginBottom: initCourseMarginBottom,marginTop: nAppointmentButtonDivMarginTop}"><mt-button class="n-appointment-button" :style="{height: nAppointmentButtonHeight,lineHeight: nAppointmentButtonLineHeight, fontSize: nAppointmentButtonFontSize}" type="default" v-on:click="applicationSubmit">申请提交</mt-button></div>
    <mt-datetime-picker ref="picker"
    type="datetime" v-model="pickerValue"
    :startDate="startDate"
    @confirm="handleConfirm(pickerValue)"
    year-format="{value}"
    month-format="{value}"
    date-format="{value}"
    hourFormat="{value}"
    minuteFormat="{value}">
    </mt-datetime-picker>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade"  position="bottom">
      <mt-picker :itemHeight="itemHeight" :slots="slots" value-key="nickName" :visibleItemCount="visibleItemCount" @click.native="popupVisible = false"  @change="getSlotValue" style="width:100%"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
  import { getLecturersMessage, fetchList, postTrialLecture, getTrialLectureInProcess, fetchLecturerMonthlyList, fetchAppointmentLecturer, fetchLecturerAdviceList, getLecturerInfo } from '@/api/lecturer'
  import { parseTime, initDatetime } from '@/utils/date'
  import { pageSize } from '@/utils/page'
  import { MessageBox } from 'mint-ui'
  export default {
    data () {
      return {
        startDate: new Date(),
        itemHeight: 60,
        myAttr: '{font-size: 28px}',
        tryTime: '点击选择时间',
        lecturerMonthlyIsOpen: false,
        referrerNickName: '点击选择推介人',
        referrerNickNameList: [],
        loginUser: {department: {name: ''}},
        lecturerMonthlyList: [],
        lecturerAdviceList: [],
        username: '',
        memo: '',
        head: '../../../static/head.jpg',
        courseWareName: '',
        visibleItemCount: 3,
        slots: [{
          values: []
        }],
        pickerValue: '',
        courseWareList: [],
        lecturersNickName: '',
        popupVisible: false,
        lecturersScope: {},
        isShow: 0,
        trialLectureIsInProcess: {},
        courseNum: '',
        address: '',
        courseHour: '',
        score: '',
        level: '',
        pageNum: 1,
        advicePageNum: 1,
        loading: true,
        adviceLoading: true,
        pageSize: pageSize,
        allLoaded: false,
        listQuery: {

        }
      }
    },
    created () {
      this.startDate = initDatetime(new Date(), 0, 0)
      this.getLecturers()
      this.getCourseWareList()
      this.getLecturerAdviceList()
    },
    filters: {
      formatDate (time) {
        if (time === null) {
          return '--'
        }
        var date = new Date(time)
        return parseTime(date, '{y}-{m}-{d} {h}:{i}')
      },
      formatDateDHSS (time) {
        if (time === null) {
          return '--'
        }
        var date = new Date(time)
        return parseTime(date, '{m}-{d} {h}:{i}')
      }
    },
    computed: {
      headHeight () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      toWidth () {
        return this.clientWidth * 176 / 750 + 'px'
      },
      toHeight () {
        return this.clientWidth * 176 / 750 + 'px'
      },
      toBorderRadius () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      toShapeOutside () {
        return this.clientWidth * 150 / 750 + 'px'
      },
      toBorderWidth () {
        return this.clientWidth * 8 / 750 + 'px'
      },
      nickNameFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      nickNamePaddingTop () {
        return this.clientWidth * 112 / 750 + 'px'
      },
      levelWidth () {
        return this.clientWidth * 49 / 750 + 'px'
      },
      levelHeight () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      levelBorderRadius () {
        return this.clientWidth * 5 / 750 + 'px'
      },
      levelFontSize () {
        return this.clientWidth * 23 / 750 + 'px'
      },
      levelMarginLeft () {
        return this.clientWidth * 15 / 750 + 'px'
      },
      trialLectureDivMarginLeft () {
        return this.clientWidth * 60 / 750 + 'px'
      },
      orderDivMarginLeft () {
        return this.clientWidth * 41 / 750 + 'px'
      },
      orderButtonWidth () {
        return this.clientWidth * 153 / 750 + 'px'
      },
      orderMessageWidth () {
        return this.clientWidth * 400 / 750 + 'px'
      },
      orderButtonPaddingRight () {
        return this.clientWidth * 47 / 750 + 'px'
      },
      orderMarginTop () {
        return this.clientWidth * 41 / 750 + 'px'
      },
      becomeLecturerButtonWidth () {
        return this.clientWidth * 414 / 750 + 'px'
      },
      becomeLecturersDiv () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      HRmarginLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      HRmarginRight () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      lecturerNewsOnderFontSize () {
        return this.clientWidth * 68 / 750 + 'px'
      },
      lecturerNewsDownFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      monthlyPaddingWidth () {
        return this.clientWidth * 230 / 750 + 'px'
      },
      lecturersHead () {
        return this.clientWidth * 302 / 750 + 'px'
      },
      initCourseMarginBottom () {
        return this.clientWidth * 113 / 750 + 'px'
      },
      newsPaddingDivHeight () {
        return this.clientWidth * 120 / 750 + 'px'
      },
      newsPaddingDivPaddingTop () {
        return this.clientWidth * 52 / 750 + 'px'
      },
      backgroundMaxHeight () {
        return this.clientWidth * 400 / 750 + 'px'
      },
      adviceDivMaxHeight () {
        return this.clientWidth * 800 / 750 + 'px'
      },
      lecturerMonthlyOnderFontSize () {
        return this.clientWidth * 40 / 750 + 'px'
      },
      lecturerMonthlyOnderPaddingBottom () {
        return this.clientWidth * 16 / 750 + 'px'
      },
      lecturerMonthlyDownFontSize () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      lecturersTitlePaddingTop () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      lecturersTitleHeight () {
        return this.clientWidth * 80 / 750 + 'px'
      },
      lecturersTitleLineHeight () {
        return this.clientWidth * 80 / 750 + 'px'
      },
      lecturersHeight () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      lecturersLineHeight () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      lecturersPaddingBottom () {
        return this.clientWidth * 12 / 750 + 'px'
      },
      imgWidth () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      imgPaddingLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      imgPaddingTop () {
        return this.clientWidth * 35 / 750 + 'px'
      },
      imgHeight () {
        return this.clientWidth * 110 / 750 + 'px'
      },
      nLecturersDetailPaddingTop () {
        return this.clientWidth * 35 / 750 + 'px'
      },
      nLecturersDetailPaddingLeft () {
        return this.clientWidth * 22 / 750 + 'px'
      },
      nLecturersNumberWidth () {
        return this.clientWidth * 66 / 750 + 'px'
      },
      nLecturersNumberHeight () {
        return this.clientWidth * 96 / 750 + 'px'
      },
      nLecturersNumberPaddingTop () {
        return this.clientWidth * 35 / 750 + 'px'
      },
      nLecturersNumberPaddingRight () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      nLecturersButtonWidth () {
        return this.clientWidth * 118 / 750 + 'px'
      },
      nLecturersButtonHeight () {
        return this.clientWidth * 54 / 750 + 'px'
      },
      nLecturersButtonFontSize () {
        return this.clientWidth * 22 / 750 + 'px'
      },
      nLecturersAdviceLineHeight () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      nLecturersAdviceFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      roundWidth () {
        return this.clientWidth * 19 / 750 + 'px'
      },
      roundHeight () {
        return this.clientWidth * 19 / 750 + 'px'
      },
      roundTop () {
        return this.clientWidth * 38 / 750 + 'px'
      },
      roundLeft () {
        return -this.clientWidth * 10 / 750 + 'px'
      },
      orderHeight () {
        return this.clientWidth * 176 / 750 + 'px'
      },
      orderLineHeight () {
        return this.clientWidth * 32 / 750 + 'px'
      },
      orderMessageFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      orderMessageLetterSpacing () {
        return this.clientWidth * 4 / 750 + 'px'
      },
      orderMessageLineHeight () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      becomeLecturerButtonHeight () {
        return this.clientWidth * 86 / 750 + 'px'
      },
      becomeLecturerFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      becomeLecturerBorderRadius () {
        return this.clientWidth * 5 / 750 + 'px'
      },
      becomeLecturerMarginTop () {
        return this.clientWidth * 90 / 750 + 'px'
      },
      orderButtonHeight () {
        return this.clientWidth * 65 / 750 + 'px'
      },
      orderButtonFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      orderButtonBorderRadius () {
        return this.clientWidth * 5 / 750 + 'px'
      },
      dashedTop () {
        return this.clientWidth * 110 / 750 + 'px'
      },
      dashedWidth () {
        return this.clientWidth * 1 / 750 + 'px'
      },
      dashedHeight () {
        return this.clientWidth * 150 / 750 + 'px'
      },
      monthlyMarginTop () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      monthlyDateMarginTop () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      monthlyDateMarginBottom () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      monthlyDateMarginFontSize () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      monthlyParentDivHeight () {
        return this.clientWidth * 280 / 750 + 'px'
      },
      nAppointmentButtonHeight () {
        return this.clientWidth * 98 / 750 + 'px'
      },
      nAppointmentButtonLineHeight () {
        return this.clientWidth * 98 / 750 + 'px'
      },
      nAppointmentButtonFontSize () {
        return this.clientWidth * 32 / 750 + 'px'
      },
      nAppointmentButtonDivMarginTop () {
        return this.clientWidth * 60 / 750 + 'px'
      },
      appointmentCheckboxClassWidth () {
        return this.clientWidth * 440 / 750 + 'px'
      },
      appointmentCheckboxWidth () {
        return this.clientWidth * 198 / 750 + 'px'
      },
      appointmentCheckboxHeight () {
        return this.clientWidth * 64 / 750 + 'px'
      },
      appointmentCheckboxFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      appointmentCheckboxLineHeight () {
        return this.clientWidth * 64 / 750 + 'px'
      },
      appointmentTitleFontFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      appointmentTitleFontWidth () {
        return this.clientWidth * 230 / 750 + 'px'
      },
      appointmentMeetingRoomColumnHeight () {
        return this.clientWidth * 240 / 750 + 'px'
      },
      appointmentColumnHeight () {
        return this.clientWidth * 78 / 750 + 'px'
      },
      appointmentColumnHeight2 () {
        return this.clientWidth * 178 / 750 + 'px'
      },
      appointmentColumnLineHeight () {
        return this.clientWidth * 78 / 750 + 'px'
      },
      becomeLecturersDivMarginTop () {
        return this.clientWidth * 130 / 750 + 'px'
      },
      nLecturersIsOpen () {
        return this.clientWidth * 14 / 750 + 'px'
      },
      nLecturersNum () {
        return this.clientWidth * 58 / 750 + 'px'
      },
      trialLectureDivMarginTop () {
        return this.clientWidth * 110 / 750 + 'px'
      },
      orderDivPaddingTop () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      marginBottom30px () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      height600px () {
        return this.clientWidth * 600 / 750 + 'px'
      }
    },
    methods: {
      openMonthly () {
        if (this.lecturerMonthlyIsOpen === false) {
          this.lecturerMonthlyIsOpen = true
        } else {
          this.lecturerMonthlyIsOpen = false
        }
        fetchLecturerMonthlyList().then(response => {
          this.lecturerMonthlyList = response.data
        })
      },
      openGetSlotValue () {
        fetchAppointmentLecturer().then(response => {
          this.slots[0].values = response.data
        })
        this.popupVisible = true
      },
      getSlotValue (index) {
        if (index.getValues()[0] !== undefined && index.getValues()[0] !== null) {
          this.referrerNickNameList = index.getValues()[0]
          this.referrerNickName = index.getValues()[0].nickName
        }
      },
      getTrialLecture () {
        getTrialLectureInProcess().then(response => {
          this.trialLectureIsInProcess = response.data
        })
      },
      openPicker () {
        this.$refs.picker.open()
      },
      handleConfirm (v) {
        this.tryTime = parseTime(v, '{y}-{m}-{d} {h}:{i}')
      },
      getLecturers () {
        getLecturersMessage().then(response => {
          this.lecturersScope = response.data
        })
      },
      openLecturerLevel () {
        var router = this.$router
        router.push('/lecturerLevel')
      },
      openAdvice () {
        var router = this.$router
        router.push('/lecturerAdvice')
      },
      openMoreCourse (id) {
        this.$router.push({path: '/lecturerCourse', query: {id: id}})
      },
      getCourseWareList () {
        this.loading = true
        this.listQuery.pageNum = this.pageNum
        this.listQuery.pageSize = this.pageSize
        let oldCourseList = this.courseWareList
        fetchList(this.listQuery).then(response => {
          if (response.data.content !== null && response.data.content.length > 0) {
            for (var i in response.data.content) {
              oldCourseList.push(response.data.content[i])
            }
            this.courseWareList = oldCourseList
            this.loading = false
            this.pageNum = this.pageNum + 1
          }
        })
      },
      getLecturerAdviceList () {
        this.adviceLoading = true
        this.listQuery.pageNum = this.advicePageNum
        this.listQuery.pageSize = this.pageSize
        let oldLecturerAdviceList = this.lecturerAdviceList
        console.log('dd')
        console.log(this.listQuery)
        fetchLecturerAdviceList(this.listQuery).then(response => {
          console.log(response.data.content)
          if (response.data.content !== null && response.data.content.length > 0) {
            for (var i in response.data.content) {
              oldLecturerAdviceList.push(response.data.content[i])
            }
            this.lecturerAdviceList = oldLecturerAdviceList
            this.adviceLoading = false
            console.log('advicePageNum' + this.advicePageNum)
            this.advicePageNum = this.advicePageNum + 1
            console.log('advicePageNum' + this.advicePageNum)
          }
        })
      },
      openLecturerDialog () {
        if (this.isShow === 0) {
          this.isShow = 1
        } else {
          this.isShow = 0
        }
        this.getTrialLecture()
      },
      checkMeetingRoom (name, event) {
        var all = this.$el.getElementsByClassName('appointment-checkbox')
        all[0].className = 'appointment-checkbox'
        all[1].className = 'appointment-checkbox'
        all[2].className = 'appointment-checkbox'
        all[3].className = 'appointment-checkbox'
        event.currentTarget.className = 'appointment-checkbox appointment-checkbox-checked'
        this.address = name
      },
      appointment () {
        this.isShow = 2
        getLecturerInfo().then(response => {
          this.loginUser = response.data
        })
        // this.$el.parentElement.parentElement.children[0].style = 'display:none'
      },
      applicationSubmit () {
        if (this.tryTime === '点击选择时间' || this.tryTime === null || this.tryTime === undefined || this.tryTime === '') {
          MessageBox({
            title: '提示',
            message: '请选择时间'
          })
          return
        } else if (this.courseWareName === null || this.courseWareName === undefined || this.courseWareName === '') {
          MessageBox({
            title: '提示',
            message: '请输入课件名称'
          })
          return
        } else if (this.address === null || this.address === undefined || this.address === '') {
          MessageBox({
            title: '提示',
            message: '请选择开课地址'
          })
          return
        }
        this.listQuery.tryTime = this.tryTime
        this.listQuery.address = this.address
        this.listQuery.referrerNickName = this.referrerNickNameList.nickName
        this.listQuery.courseWareName = this.courseWareName
        this.listQuery.lecturerId = this.referrerNickNameList.id
        this.listQuery.referrerEmpNo = this.referrerNickNameList.empNo
        this.listQuery.memo = this.memo
        postTrialLecture(this.listQuery).then(response => {
          if (response.data === 'SUCCESS') {
            MessageBox({
              title: '已提交',
              message: '您的申请已提交,等待培训部审批。'
            })
            this.isShow = 1
            // this.$el.parentElement.parentElement.children[0].style = 'display:initial'
            this.getTrialLecture()
          }
        })
      }
    }
  }
</script>
<style>
    .span-addressAndTime{
      color:black;
      font-weight: bold;
    }
    .head{
      background: #00B685;
    }
    .title{
      text-align: center;
    }
    .to{
      border-color:#ffffff;
      border-style:solid;
    }
    .nickName{
      color: #5B6175;
      text-align: center;
      font-family: 微软雅黑;
    }
    .background{
      overflow-y: auto;
    }
    .advice-div{
      overflow-y: auto;
      background-color: white;
    }
    .level{
      background: #F7B437;
      display:inline;
      font-weight: bold;
      text-align: center;
      color:#ffffff;
    }
    .lecturer-news-onder{
      font-weight: bold;
      color: #5B6175;
      font-family: 微软雅黑;
    }
    .lecturer-news-down{
      color: #5B6175;
      font-weight: bold;
      font-family: 微软雅黑;
    }
    .lecturer-monthly-onder{
      font-weight: bold;
      color: #5B6175;
      font-family: 微软雅黑;
    }
    .lecturer-monthly-down{
      color: #5B6175;
      font-family: 微软雅黑;
    }
    .newsPadding{
      text-align: center;
      float: left;
    }
    .icon{ 
      text-align: center;
    }
    .lecturers-title{
      box-shadow: -5px 2px -5px #edeef6;
      background: #edeef6;
    }
    .lecturers-head{
      background: #fff;
    }
    .lecturers{
      float: left;
    }
    .span-lecturersName{
      color:#5B6175;
      font-family: 微软雅黑;
      font-size: 30px;
      font-weight: bold;
    }
    .n-img {
    float: left;
    border-radius: 50%;
    overflow: hidden;
    }
    .n-lecturers-detail {  
    float: left;
    color: #5b6175;
    }
    .n-lecturers-title {
    font-weight: bold;
    color:#5B6175;
    }
    .n-lecturers-time {
    color:#5B6175;
    }
    .n-lecturers-lastTime {
    color:#5B6175;
    }
    .n-lecturers-number{
      float: right;
    }
    .n-lecturers-isOpen{
      color:#5b6175;
    }
    .n-lecturers-num{
      color:#008AF3;
      font-family: 微软雅黑;
      font-weight: bold;
    }
    .n-lecturers-height{
      background: #ffffff;
    }
    .n-button-float-right{
      float: right;
    }
    .n-lecturers-advice{
      color: #5B6175;
      font-family: 微软雅黑;
    }
    .n-lecturers-advice-time{
      color:#8788A5;
    }
    hr{
      filter: alpha(opacity=100,finishopacity=0,style=3);
      width:"80%";
      color:#987cb9;
      SIZE:3px;
    }
    .round{
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      float: left;
    }
    .red{
      background-color:red;
    }
    .DarkOrange{
      background-color: DarkOrange;
    }
    .yellow{
      background-color: Orange;
    }
    .order-text{
     color:#5B6178;
     font-weight: bold;
    }
    .order-message{
     float: left;
     color: #7C8291;
    }
    .becomeLecturer-button{
      color:#ffffff;
    }
    .order-button{
      color:#ffffff;
    }
    .dashed{
      position: absolute;
      z-index: 999;
      border-right:1px dashed #7C8291 ; 
    }
    .becomeLecturers-div{
      color: #BEBFD7;
    }
    .becomeLecturers-button-div{
      text-align: center;
      width: 100%;
    }
    .appointment{
      background-color: white;
    }
 
    .appointment-title-font{
      color:#BEBFD7;
      float:left;
    }
    .appointment-message-font{
      color:#5B6175;
      float:left;
    }
    .appointment-checkbox{
      text-align: center;
      border-radius: 5px;
      border: 1px solid #BEBFD7;
      color:#BEBFD7;
      float: left;
    }
    .appointment-checkbox-checked{
      border: 1px solid #00b685;
      color:#00b685;
      float: left;
    }
    .appointment-checkbox-class{
      float: left;
    }
    .n-appointment-button-div{
     text-align: center;
    }
    .monthly-parent-div{
      width: 100%;
      background-color: #fff;
      border: 1px inside #EDEEF6;
    }
    .monthlyPadding{
      float: left;
      text-align: center;
    }
</style>